Fontin virkistys media queryjä käytettäessä

Vastuullinen sivuston rakennus (responsive design, vastuullinen suunnittelu) tuo tullessaan ongelmia mm. fonttipuolella. Periaatteessa vastuulliseen rakentamiseen kuuluu se, että käytetään fontteja jotka on alun perin suunniteltu web-käyttöön. Kuitenkaan aina tämä ei ole mahdollista, koska osaan fonteista ei välttämättä ole saatavilla web-fonttimahdollisuutta. Yleensä syynä on se, että esimerkiksi Typekit tai Google Web Fonts ei tarjoa sitä eikä fontin lisenssi mahdollista muunnosta web-fontiksi esimerkiksi Font Squirrelin kautta.

Cufón

Cufón on kohtalaisen simppeli tapa käyttää kustomoituja fontteja web-ympäristössä. Teknisellä tasolla fontit muunnetaan JavaScript-muotoiseksi ja haluttu teksti muutetaan selaimen ominaisuudet huomioiden esimerkiksi svg-muotoisena piirroksena alkuperäinen teksi piilottaen. Vaikka tarkoitukseni ei ole kertoa Cufónista itsestään, on syytä muistaa että Cufón on vaihtoehdoissa loppupäässä. Jos fonttia ei löydy vapaista tai maksetuista kirjastoista (tai niitä ei ole vara käyttää) ja jos fonttia ei voi muuntaa webfontiksi Font Squirrelilla niin käytettäköön Cufónia. Mutta viisaasti, sillä js-muotoinen fonttitiedosto kasvaa pelottavan nopeasti valtavankokoiseksi.

Media Query

Media Query (suomennosta ei taida olla) on tällä hetkellä hyvin tuore tuttavuus tulevaisuuden web-tekniikoiden joukossa. Kyseessä on tapa rajata selaimen saamia tyylimääritteitä erilaisten rajoitusten mukaan. Tietyllä tapaa voisi puhua alkeellisista if-lauseista tyylitiedostoissa. Rajoituksena on Internet Explorerin erittäin huono tuki, joka tosin on kierrettävissa respond.js kirjaston avulla. Vastuullisessa suunnittelussa Media Queryjen avulla rakennetaan yhdestä sisällöstä eri ulkoasuja erikokoisille selaimille.

Cufónin luoma ongelma

Koska Cufón piirtää tekstin tyylimääritysten mukaan (koko, tyyli, paino) sen jälkeen kun tyylit on määritelty, eivät kaikki fontin tyylimuutokset näy vaikka niitä esimerkiksi Firebugilla tai Web Inspectorilla muutettaisiin. Tämän takia Media Queryt eivät toimi suoraan fonttikokojen muutoksissa.

Esimerkin kertominen avaa tilannetta eniten. Käytössä on 922px leveä sivu, jossa voimme käyttää todella suurta (130px) erikoisfonttia pääotsikossa (h1). Jotta vastuullinen sivuston rakennus toimisi hyvin, emme voi käyttää samaa kokoa 768px leveässä ulkoasussa. Niinpä pääotsikon kooksi riittää vaikkapa 80px. Kun selainikkuna kavennetaan alkuperäisestä yli 992px koosta alle 992px kokoon siirrytään käyttämään 762px määrrettä. Ongelmaksi muodostuu se, että Cufón edelleen olettaa fontin koon olevan alkuperäinen 130px, eikä näin ollen skaalaudu alaspäin.

Ratkaisu ja toteutus

Meidän onneksi Cufónin rajapinnassa on kutsu Cufon.refresh, jonka avulla voimme pakottaa Cufónin päivittämään fonttien piirron kohdalleen. Erittäin näppärä kutsu myös vaikkapa erilaisissa ajax-kutsuissa. Ratkaisuna on tuo Cufon.refresh-kutsun käyttö silloin kun se on tarpeen.

Tässä tapauksessa meillä on vain yksi elementti, jossa käytetään erikoisfonttia ja jonka koko muuttuu (h1). Jossakin toisessa tapauksessa ongelma saattaa olla laajempi, mutta tämä toteutus antanee vinkkiä toimivasta ratkaisusta. Lisäksi käytän tässä jQuerya pelkästään sen takia, että se on erittäin helppo kirjasto lukea.

Toteutus tapahtuu jotakuinkin näin:

`var ctrl = $(‘h1’),
cmpr = ctrl.css(‘font-size’);

$(window).resize(function(){
if (ctrl.css(‘font-size’) != cmpr) {
cmpr = ctrl.css(‘font-size’);
Cufon.refresh();
};
});`

Ensin nappaamme kaksi muuttujaa, ctrl ja cmpr. Okei, nään on aika hankalia muistaa mutta tää on suoraan kopsattu toimivasta koodista. Ctrl on kontrolliobekti, tässä tapauksessa h1. Cmpr on vertailuarvo, tässä tapauksessa ctrl-objektin fonttikoko. Ikkunan koon muuttumisen yhteydessä triggeröidään if-lause, jolla tarkistetaan onko kontrolliobjektin fonttikoko eri kuin vertailuarvo. Jos on niin vertailuarvo päivitetään kontrolliobjektin muuttuneeseen arvoon ja Cufon.refresh-funktio kutsutaan. Näin saadaan erikoisfontin koko muutettua soppelimmaksi.

Tämä toteutus ei ole täysin ongelmaton, mutta toimiva. YMMV. Käyttö ja parantelu sallittua, kertokaa toki jos parempi versio on olemassa. Kontrolliobjektina voi käyttää muutakin kuin fonttia, esimerkiksi jonkin elementin leveys voisi olla yksi vaihtoehto.